<script setup>
import { ref } from "vue";
import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/counter";
import { useRouter } from "vue-router";
const store = useCounterStore();
const router = useRouter();
const {
  menuTreeList,
  key,
  value,
  lastNodeValue,
  color,
  level,
  moveTreeList,
  checkList,
} = storeToRefs(store);
const props = defineProps({
  buttonStatus: {
    type: Boolean,
    default: true,
  },
});
const tree = ref(null);
const clear = () => {
  key.value = "";
  value.value = "";
  color.value = "";
  level.value = "";
  checkList.value = [];
  // tree.value.setCheckedKeys([]);
  tree.value.setCurrentKey(null);
  selectNode.value = [];
  emit("change");
};
const emit = defineEmits(["customEvent", "change"]);
const selectNode = ref([]);
const handleNodeClick = (node, data) => {
  menuTreeList.value.forEach((item) => {
    if (item.title == data.parent.data.title) {
    }
  });
  if (!props.buttonStatus) {
    emit(
      "customEvent",
      node.title.slice(0, 1) != "#" ? node.title.split("=")[0] : "",
      node.title.slice(0, 1) != "#"
        ? data.parent.data.title.match(/#(.*?)=/)[1]
        : ""
    );
    selectNode.value = node;

    return;
  }
  moveTreeList.value = [data.parent.data];

  if (node.title.slice(0, 1) == "#") {
    key.value = node.title.match(/#(.*?)=/)[1];
    value.value = "";
  } else {
    lastNodeValue.value = data.parent.data.title.match(/#(.*?)=/)[1];
    value.value = node.title.split("=")[0];
    key.value = "";
  }

  selectNode.value = node;

  emit("change");
};

function handleNodeDrop(draggingNode, dropNode, dropType) {
  // 在这里处理拖拽完成后的需求，例如更新数据模型等
}
const defaultProps = {
  children: "topics",
  label: "title",
};
</script>

<template>
  <div
    style="width: 100%; height: 555px; background: #282828; overflow-y: scroll"
  >
    <div class="bg-hui font-14" @click="clear">属性</div>
    <div class="tree">
      <el-tree
        ref="tree"
        node-key="title"
        :default-expanded-keys="[buttonStatus ? '' : moveTreeList[0].title]"
        style="max-width: 600px"
        :data="buttonStatus ? menuTreeList : moveTreeList"
        :props="defaultProps"
        class="tree"
        highlight-current
        @node-click="handleNodeClick"
        @node-drop="handleNodeDrop"
      >
        <template #default="{ node, data }">
          <span
            class="c-fff"
            :class="[data.title == selectNode.title ? 'select' : '']"
            >{{ data.title?.match(/=([^=]*)/)[1] || data.title }}</span
          >
        </template>
      </el-tree>
    </div>
  </div>
</template>

<style scoped lang="scss">
/* 节点文本颜色 */
::v-deep .el-tree-node__label {
  color: #fff;
}

/* 节点默认背景色 */
::v-deep .el-tree-node {
  background-color: #282828 !important;
}
.select {
  color: #2c2c2c;
}
.c-fff {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.c-fff:hover {
  color: #2c2c2c !important; /* 替换为你想要的颜色 */
}
::v-deep .el-tree__empty-block {
  background-color: #282828;
}
</style>
